<template>
  <div class="app-container">
    <basic-table
      :table-title="tableTitle"
      :data-source="dataSource"
      :data-params="dataParams"
      :search-form="searchForm"
      :multiple-table="false"
    >
      <template v-slot:message="scope">
        <template v-if="scope.row.MsgType === 1">
          <el-popover
            placement="right"
            trigger="hover"
            width="500"
          >
            <div style="line-height: 24px; overflow: hidden;">
              <div>
                <h5 style=" margin: 0; color: #c9c9c9;">详情信息</h5>
              </div>
              <div style="max-height: 400px; padding: 16px; overflow: auto; ">
                {{ scope.row.Text }}
              </div>
            </div>
            <div slot="reference" style="width: 100%; height: 24px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; ">
              {{ scope.row.Text }}
            </div>
          </el-popover>
        </template>
        <template v-if="scope.row.MsgType === 2">
          {{ scope.row.Index }}
        </template>
        <template v-if="scope.row.MsgType === 3">
          <el-image
            style="width: 24px; height: 24px;"
            :src="scope.row.ImageURL"
            fit="contain"
            :preview-src-list="[scope.row.ImageURL]"
          >
          </el-image>
        </template>
        <template v-if="scope.row.MsgType === 4">
          <el-popover
            placement="right"
            trigger="hover"
            width="500"
          >
            <div style="line-height: 24px; overflow: hidden;">
              <div>
                <h5 style=" margin: 0; color: #c9c9c9;">详情信息</h5>
              </div>
              <div style="max-height: 400px; padding: 16px; overflow: auto; ">
                {{ scope.row.FileUrl }}
              </div>
            </div>
            <el-image slot="reference" style="width: 30px; height: 30px;" :src="getIcons(scope.row)" />
          </el-popover>
        </template>
      </template>
      <template v-slot:messageType="scope">
        <template v-if="scope.row.MsgType === 1">
          <el-image style="width: 30px; height: 30px;" :src="require('@/assets/extensions/txt.svg')"></el-image>
        </template>
        <template v-if="scope.row.MsgType === 2">
          <el-image style="width: 30px; height: 30px;" :src="require('@/assets/extensions/txt.svg')"></el-image>
        </template>
        <template v-if="scope.row.MsgType === 3">
          <el-image style="width: 30px; height: 30px;" :src="require('@/assets/extensions/image.svg')"></el-image>
        </template>
        <template v-if="scope.row.MsgType === 4">
          <el-image style="width: 30px; height: 30px;" :src="require('@/assets/extensions/folder.svg')"></el-image>
        </template>
      </template>
    </basic-table>
  </div>
</template>
<script>
import BasicTable from '@/components/BasicTable/index.vue'

import { GetGroupChatRecord } from '@/api/GroupChatRecord'

export default {
  name: 'Group',
  components: { BasicTable },
  data() {
    return {
      loading: false,
      dataSource: () => GetGroupChatRecord,
      dataParams: {},
      tableTitle: [
        {
          label: '消息',
          value: 'Text',
          show: true,
          type: 'slot',
          slot: 'message'
        },
        {
          label: '消息类型',
          value: 'MsgType',
          show: true,
          width: '100',
          transfer: {
            1: '文本',
            2: '表情',
            3: '图片',
            4: '文件'
          }
        },
        {
          label: '群名称',
          value: 'GroupName',
          show: true,
          width: '250'
        },
        {
          label: '发送人',
          value: 'FromUser',
          show: true,
          width: '120'
        },
        {
          label: '发送时间',
          value: 'SendTime',
          show: true,
          width: '200'
        }
      ],
      searchForm: {
        expend: true,
        title: '表格筛选',
        size: 'small',
        fields: [
          {
            show: true,
            type: 'input',
            label: '发送人',
            labelShow: true,
            name: 'fromUser'
          },
          {
            show: true,
            type: 'input',
            label: '群名称',
            labelShow: true,
            name: 'groupName'
          },
          {
            show: true,
            type: 'datePicker',
            label: '发送时间',
            labelShow: true,
            name: ['sSendTime', 'eSendTime'],
            isRange: true
          },
          {
            show: true,
            type: 'input',
            label: '关键词',
            labelShow: true,
            name: 'keywords'
          }
        ]
      }
    }
  },
  created() {
    if (this.$route.query.userName !== undefined) {
      this.dataParams.fromUser = this.$route.query.userName
      this.searchForm.fields[0].show = false
    }

    if (this.$route.query.groupName !== undefined) {
      this.dataParams.groupName = this.$route.query.groupName
      this.searchForm.fields[1].show = false
    }

    if (this.$route.query.groupId !== undefined) {
      this.dataParams.groupId = this.$route.query.groupId
      this.searchForm.fields[1].show = false
    }
  },
  methods: {
    getIcons(row) {
      const ext = row.FileUrl.split('.').pop()
      switch (ext) {
        case 'docx':
        case 'doc':
          return require('@/assets/extensions/docx.svg')
          break;

        case 'txt':
          return require('@/assets/extensions/txt.svg')
          break;

        default:
          return require('@/assets/extensions/folder.svg')
      }
    }
  }
}
</script>
